<script setup>
import {inject, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {doDelete, doGet, doPost} from "@/util/request.js";
import {
  Avatar, Calendar, ChatLineSquare, ChatRound, Cherry, Coordinate, Edit, EditPen, GoodsFilled, InfoFilled,
  Iphone, Loading, Message, PieChart, Place, Promotion, ShoppingCartFull, Star, Stopwatch, Timer, User,
  Wallet, WalletFilled
} from "@element-plus/icons-vue";
import {showMessage} from "@/util/message.js";
import {ElMessageBox} from "element-plus";

//刷新页面
const refresh = inject('refresh')
//路由对象
const route = useRoute()
const router = useRouter()
//对话框打开
const dialogVisible = ref(true)
//详情数据对象
const clueDetail = ref({})
//查询详情数据
const loadClueDetail = () => {
  //获取路由参数
  const clueId = route.params.id
  //发送请求获取详情数据
  doGet('/api/clue/detail/' + clueId, {}).then(resp => {
    if (resp.data.code === 200) {
      clueDetail.value = resp.data.data
    } /*else {
      showMessage('查询详情数据失败', resp.data.msg, 'error')
    }*/
  }).catch()
}
/*-------------------备注相关----------------------*/
//显示备注对话框
const dialogTableVisible = ref(false)
//表格数据
const gridData = ref({})
// 获取表格数据
const remark = (id) => {
  loadGridData(id)
}
const loadGridData = (clueId) => {
  //发送请求，获取表格数据
  doGet('/api/clue/remarkList/' + clueId, {}).then(resp => {
    dialogTableVisible.value = true
    if (resp.data.code === 200) {
      gridData.value = resp.data.data
      console.log(gridData.value)
    } else {
      showMessage('查询活动备注失败', resp.data.msg, 'error')
    }
  })
}
const deleteNote = (id) => {
  ElMessageBox.confirm('确认删除该备注吗？').then(() => {
    // 发送请求，删除备注
    doDelete('/api/clue/deleteRemark/' + id, {}).then(resp => {
      // 判断是否删除成功
      if (resp.data.code === 200) {
        // 提示
        showMessage('删除备注成功', 'success')
        // 刷新表格数据
        refresh()
      } else {
        showMessage('删除活动备注失败', 'error', resp.data.msg)
      }
    })
  }).catch()
}
/*-----------------*/
//添加备注弹窗
const tianJiaBeiZhu = ref(false)
//新增备注对象
const addNoted = ref({})
//添加备注
const addNote = () => {
  // 打开添加备注弹窗
  tianJiaBeiZhu.value = true
}
//点击添加发送请求
const addButton = () => {
  let beiZhuData = {
    clueId: route.params.id,
    noteContent: addNoted.value.noteContent,
    noteWay:addNoted.value.noteWay
  }
  // 发送请求，添加活动备注
  doPost('/api/clue/addRemark', beiZhuData).then(resp => {
    if (resp.data.code === 200) {
      // 提示
      showMessage('添加备注成功', 'success')
      // 刷新表格数据
      refresh()
      // 清空备注内容
      addNoted.value.noteContent = ''
      // 关闭弹窗
      tianJiaBeiZhu.value = false
    } else {
      showMessage('添加活动备注失败', 'error', resp.data.msg)
    }
  })
}

/*-------------------备注相关----------------------*/
//跳转
const editButton = (id) => {
  //跳转到详情页面
  router.push('/index/clue/edit/' + id)
}
const noteWayList = ref([])
//获取字典值列表
const loadDicValueList = (typeCode) => {
  doGet('/api/dic/value/list/' + typeCode, {}).then(resp => {
    if (resp.data.code === 200) {
      if (typeCode === 'noteWay') {
        noteWayList.value = resp.data.data
      }
    } else {
      showMessage('查询字典值列表失败', resp.data.msg, 'error')
    }
  })
}
const productList = ref([])
// 查询所有产品列表
const loadProductList = () => {
  doGet('/api/product/list', {}).then(resp => {
    if (resp.data.code === 200) {
      productList.value = resp.data.data;
    } else {
      showMessage('查询产品列表失败，原因：' + resp.data.msg, 'error')
    }
  })
}
//转换客户表单验证规则.
const clueFormRules = {
  product: [
    { required: true, message: '请选择意向产品', trigger: ['change','blur'] }
  ],
  description: [
    { required: true, message: '请输入客户名称', trigger: 'blur' },
    { min: 2, max: 255, message: '长度在 2 到 255 个字符', trigger: 'blur' }
  ],
  nextContactTime: [
    { required: true, message: '请输入客户手机号码',trigger: 'blur' },
  ]
}
//转换客户表单验证提交表单
const customerForm = ref()
//转换客户的弹出框
const zhuanhuankehu = ref(false)
//转换客户弹窗打开
const  switchClue= () => {
  zhuanhuankehu.value = true
}
//转换客户对象
const changeCustomer=ref({})
// 从路由参数中获取线索标识
const clueId = route.params.id
//转换客户
const customerButton=(formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 准备转换客户的参数
      let params = {
        clueId: clueId,
        product: changeCustomer.value.product,
        description: changeCustomer.value.description,
        nextContactTime: changeCustomer.value.nextContactTime
      }
      console.log(params)
      //发送请求，转换客户
      ElMessageBox.confirm('确认转换客户吗？').then(() => {
        // 发送请求，转换客户
        doPost('/api/customer/switchCustomer' , params).then(resp => {
          // 判断是否转换成功
          if (resp.data.code === 200) {
            // 提示
            showMessage('转换客户成功', 'success')
            // 关闭弹窗
            zhuanhuankehu.value = false
            // 跳转到客户页面
            router.push('/index/customer')
          } else {
            showMessage('转换客户失败', 'error', resp.data.msg)
          }
        })
      })
    }
  })
}

onMounted(() => {
  loadClueDetail()
  //跟踪方式列表
  /*loadDicValueList('noteWay')*/
})

</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      class="warn-dialog"
      width="1000"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :align-center="true"
      :center="true"
      :overflow="true"
      :show-close="false"
      :title="'线索详情('+clueDetail.id+')'">
    <el-descriptions
        :model="clueDetail"
        class="margin-top"
        :column="3"
        border>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user/>
            </el-icon>
            负责人
          </div>
        </template>
        {{ clueDetail.ownerName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Promotion/>
            </el-icon>
            活动名称
          </div>
        </template>
        {{ clueDetail.activityName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Avatar/>
            </el-icon>
            用户姓名
          </div>
        </template>
        {{ clueDetail.fullName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <PieChart/>
            </el-icon>
            年龄
          </div>
        </template>
        {{ clueDetail.age === null ? '暂无' : clueDetail.age }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Cherry/>
            </el-icon>
            用户称呼
          </div>
        </template>
        {{ clueDetail.appellationName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <GoodsFilled/>
            </el-icon>
            职业
          </div>
        </template>
        {{ clueDetail.job === null ? '暂无' : clueDetail.job }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Iphone/>
            </el-icon>
            电话
          </div>
        </template>
        {{ clueDetail.phone === null ? '暂无' : clueDetail.phone }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <ChatRound/>
            </el-icon>
            微信号
          </div>
        </template>
        {{ clueDetail.weixin === null ? '暂无' : clueDetail.weixin }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Search/>
            </el-icon>
            QQ号
          </div>
        </template>
        {{ clueDetail.qq === null ? '暂无' : clueDetail.qq }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Message/>
            </el-icon>
            邮箱
          </div>
        </template>
        {{ clueDetail.email == null ? '暂无' : clueDetail.email }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Place/>
            </el-icon>
            地址
          </div>
        </template>
        {{ clueDetail.address === null ? '暂无' : clueDetail.address }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Wallet/>
            </el-icon>
            年收入
          </div>
        </template>
        {{ clueDetail.yearIncome === null ? '暂无' : clueDetail.yearIncome }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <WalletFilled/>
            </el-icon>
            是否贷款
          </div>
        </template>
        {{ clueDetail.needLoanName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Star/>
            </el-icon>
            意向状态
          </div>
        </template>
        {{ clueDetail.intentionStateTypeName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <ShoppingCartFull/>
            </el-icon>
            意向产品
          </div>
        </template>
        {{ clueDetail.intentionProductName === null ? '暂无' : clueDetail.intentionProductName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Loading/>
            </el-icon>
            线索状态
          </div>
        </template>

        <span v-if="clueDetail.intentionStateName === '已转客户'" class="trueColor">
          {{ clueDetail.intentionStateName }}
        </span>
        <span v-else class="falseColor">
          {{ clueDetail.intentionStateName }}
        </span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Coordinate/>
            </el-icon>
            线索来源
          </div>
        </template>
        {{ clueDetail.sourceTypeName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Calendar/>
            </el-icon>
            下次联系时间
          </div>
        </template>
        {{ clueDetail.nextContactTime === null ? '暂无' : clueDetail.nextContactTime }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <EditPen/>
            </el-icon>
            创建人
          </div>
        </template>
        {{ clueDetail.createByName == null ? '暂无' : clueDetail.createByName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Edit/>
            </el-icon>
            编辑人
          </div>
        </template>
        {{ clueDetail.editByName == null ? '暂无' : clueDetail.editByName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Timer/>
            </el-icon>
            创建时间
          </div>
        </template>
        {{ clueDetail.createTime == null ? '暂无' : clueDetail.createTime }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Stopwatch/>
            </el-icon>
            编辑时间
          </div>
        </template>
        {{ clueDetail.editTime === null ? '暂无' : clueDetail.editTime }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <el-icon>
            <ChatLineSquare/>
          </el-icon>
          线索描述
          <el-tooltip
              class="box-item"
              effect="light"
              content="请点击查看备注"
              placement="right">
            <el-icon>
              <InfoFilled @click="remark(clueDetail.id)"/>
            </el-icon>
          </el-tooltip>
        </template>
        {{ clueDetail.description }}
      </el-descriptions-item>

    </el-descriptions>

    <div class="topUp" style="margin-left: 600px">
      <el-button @click="switchClue(clueDetail.id)">转换客户</el-button>
      <el-button type="success" @click="addNote">添加备注</el-button>
      <el-button type="primary" @click="editButton(clueDetail.id)">编辑线索</el-button>
      <el-button type="info" @click="router.back()">返回</el-button>
    </div>

  </el-dialog>
  <!-- 活动备注弹窗 -->
  <el-dialog v-model="dialogTableVisible" center title="线索备注" width="800">
    <el-table :border="true" :data="gridData">
      <el-table-column property="fullName" width="100" label="用户姓名" align="center"/>
      <el-table-column property="createByName" width="100" label="跟踪人" align="center"/>
      <el-table-column property="noteWayName" label="跟踪方式" align="center"/>
      <el-table-column property="noteContent" label="跟踪内容" align="center"/>
      <el-table-column property="createTime" label="创建时间" align="center"/>
      <el-table-column label="备注操作" align="center">
        <template #default="scope">
          <el-button size="small" type="danger" @click="deleteNote(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <!--添加备注弹框-->
  <el-dialog v-model="tianJiaBeiZhu" center title="添加备注" width="30%">
    <el-form :model="addNoted" style="margin-left: 3px;margin-top: 1px">
      <el-select v-model="addNoted.noteWay" placeholder="请选择线索状态" @click="loadDicValueList('noteWay')">
        <el-option
            v-for="item in noteWayList"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>

      <el-input type="textarea" style="width: 100%; min-height: 50px; max-height: 200px;margin-top: 10px; resize: vertical;"
                :rows="3"
                show-word-limit
                maxlength="255"
                v-model="addNoted.noteContent">
      </el-input>
      <el-button type="primary" style="margin-left: 480px;margin-top: 5px" @click="addButton(clueDetail.id)">
        添加
      </el-button>
    </el-form>
  </el-dialog>

  <!--转换客户弹框-->
  <el-dialog v-model="zhuanhuankehu" center title="转换客户" width="30%">
    <el-form ref="customerForm" :model="changeCustomer" :rules="clueFormRules" style="margin-left: 3px;margin-top: 1px">

      <el-form-item label="意向产品" prop="intentionProduct">
      <el-select v-model="changeCustomer.product" placeholder="请选择用户意向产品" @click="loadProductList('product')">
        <el-option
            v-for="item in productList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
      </el-form-item>

      <el-form-item label="客户描述" prop="noteContent">
      <el-input type="textarea" style="width: 100%; min-height: 50px; max-height: 200px; resize: vertical;"
                rows="3"
                show-word-limit
                maxlength="255"
                v-model="changeCustomer.description">
      </el-input>
      </el-form-item>

      <el-form-item label="下次联系时间" style="margin-left: 30px" prop="nextContactTime">
      <el-date-picker
          v-model="changeCustomer.nextContactTime"
          type="datetime"
          style="width: 420px"
          placeholder="请填写下次联系时间"
          format="YYYY-MM-DD hh:mm:ss"
          value-format="YYYY-MM-DD hh:mm:ss"/>
      </el-form-item>

      <el-button type="primary" style="margin-left: 480px;margin-top: 5px" @click="customerButton(customerForm)">
        转换
      </el-button>
    </el-form>
  </el-dialog>


</template>

<style scoped>
.el-form {
  margin-top: 20px;
  margin-left: 80px;
}

.el-form-item {
  margin-left: 60px;
}

.el-dialog__body {
  height: 70vh;
  overflow: auto;
}

.topUp {
  margin-top: 10px;
}

.trueColor {
  color: limegreen;
}

.el-col {
  margin-top: 20px;
  margin-left: 50px;
}
</style>